<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">components/modal.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/app-avatar.js~AppAvatar.html">AppAvatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/area-selector.js~AreaSelector.html">AreaSelector</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/avatar.js~Avatar.html">Avatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/button.js~Button.html">Button</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/checkbox.js~Checkbox.html">Checkbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/click-outside-wrapper.js~ClickOutsideWrapper.html">ClickOutsideWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-container.js~DisplayContainer.html">DisplayContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-layer.js~DisplayLayer.html">DisplayLayer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/group-list.js~GroupList.html">GroupList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/heading.js~Heading.html">Heading</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/hotkey-input-control.js~HotkeyInputControl.html">HotkeyInputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/icon.js~MDIcon.html">MDIcon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-cutter.js~ImageCutter.html">ImageCutter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-holder.js~ImageHolder.html">ImageHolder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/input-control.js~InputControl.html">InputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/list-item.js~ListItem.html">ListItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/pager.js~Pager.html">Pager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio-group.js~RadioGroup.html">RadioGroup</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio.js~Radio.html">Radio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/search-control.js~SearchControl.html">SearchControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/select-box.js~Selectbox.html">Selectbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/spinner.js~Spinner.html">Spinner</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tab-pane.js~TabPane.html">TabPane</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tabs.js~Tabs.html">Tabs</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showContextMenu">showContextMenu</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayGetRef">displayGetRef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayHide">displayHide</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayRemove">displayRemove</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displaySetStyle">displaySetStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayShow">displayShow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showImageViewer">showImageViewer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showMessager">showMessager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showAlert">showAlert</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showConfirm">showConfirm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showModal">showModal</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPrompt">showPrompt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPopover">showPopover</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">components/modal.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import React, {Component} from &apos;react&apos;;
import Display from &apos;./display&apos;;
import HTML from &apos;../utils/html-helper&apos;;
import Icon from &apos;./icon&apos;;
import timeSequence from &apos;../utils/time-sequence&apos;;
import Lang from &apos;../lang&apos;;
import InputControl from &apos;./input-control&apos;;

/** @module modal */

/**
 * &#x68C0;&#x67E5;&#x5E94;&#x7528;&#x8FD0;&#x884C;&#x7684;&#x64CD;&#x4F5C;&#x7CFB;&#x7EDF;&#x7C7B;&#x578B;&#x662F;&#x5426;&#x662F; Windows
 * @type {boolean}
 * @private
 * @constant
 */
const isWindowsOS = window.navigator.userAgent.includes(&apos;Windows&apos;);

/**
 * &#x9ED8;&#x8BA4;&#x6309;&#x94AE;&#x7C7B;&#x540D;
 * @type {Object}
 * @private
 */
const DEFAULT_CLASS_NAMES = {
    submit: &apos;primary&apos;,
    primary: &apos;primary&apos;,
    secondary: &apos;text-red red-pale&apos;,
    cancel: &apos;primary-pale text-primary&apos;
};

/**
 * &#x663E;&#x793A;&#x5BF9;&#x8BDD;&#x6846;
 * @param {?Object} props DisplayLayer &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const showModal = (props = {}, callback = null) =&gt; {
    let {
        title,
        closeButton,
        actions,
        onAction,
        onSubmit,
        onCancel,
        className,
        headingClassName,
    } = props;

    if (closeButton === undefined) {
        closeButton = true;
    }

    if (!props.id) {
        props.id = timeSequence();
    }

    className = HTML.classes(&apos;modal layer rounded&apos;, className || &apos;&apos;);

    if (actions === undefined) {
        actions = true;
    }
    if (actions === true) {
        actions = [{type: &apos;submit&apos;}, {type: &apos;cancel&apos;}];
    } else if (actions === &apos;submit&apos;) {
        actions = [{type: &apos;submit&apos;}];
    } else if (actions === &apos;cancel&apos;) {
        actions = [{type: &apos;cancel&apos;}];
    }
    let footer = null;
    if (actions &amp;&amp; actions.length) {
        actions = actions.map((act, idx) =&gt; {
            if (!act.order) {
                act.order = idx;
                switch (act.type) {
                case &apos;submit&apos;:
                    act.order += isWindowsOS ? (-9000) : 9000;
                    break;
                case &apos;primary&apos;:
                    act.order += isWindowsOS ? (-8000) : 8000;
                    break;
                case &apos;secondary&apos;:
                    act.order += isWindowsOS ? (-7000) : 7000;
                    break;
                case &apos;cancel&apos;:
                    act.order += isWindowsOS ? (9000) : -9000;
                    break;
                }
            }
            if (act.type &amp;&amp; !act.className) {
                act.className = DEFAULT_CLASS_NAMES[act.type];
            }
            if (!act.label &amp;&amp; act.type) {
                act.label = act.type === &apos;submit&apos; ? Lang.string(&apos;common.confirm&apos;) : act.type === &apos;cancel&apos; ? Lang.string(&apos;common.cancel&apos;) : act.type.toUpperCase();
            }
            return act;
        });

        actions = actions.sort((act1, act2) =&gt; {
            return act1.order - act2.order;
        });

        const handleActionClick = (action, e) =&gt; {
            let actionResult = null;
            if (onAction) {
                actionResult = onAction(action, e);
            }
            if (onSubmit &amp;&amp; action.type === &apos;submit&apos;) {
                actionResult = onSubmit(action, e);
            }
            if (onCancel &amp;&amp; action.type === &apos;cancel&apos;) {
                actionResult = onCancel(action, e);
            }
            if (action.click) {
                actionResult = action.click(action, e);
            }
            if (actionResult !== false) {
                Display.hide(props.id);
            }
        };

        footer = (&lt;footer className=&quot;footer toolbar&quot;&gt;
            {
                actions.map((action, actionIndex) =&gt; {
                    return &lt;button className={HTML.classes(&apos;btn&apos;, action.className, action.type ? `action-${action.type}` : null)} type=&quot;button&quot; onClick={handleActionClick.bind(null, action)} key={action.id || actionIndex} title={action.label}&gt;{action.label}&lt;/button&gt;;
                })
            }
        &lt;/footer&gt;);
    }

    const header = (title || closeButton) ? (&lt;header className={HTML.classes(&apos;heading&apos;, headingClassName)}&gt;
        &lt;div className=&quot;title&quot;&gt;{title}&lt;/div&gt;
        {closeButton &amp;&amp; &lt;nav style={{overflow: &apos;visible&apos;}} data-hint={Lang.string(&apos;common.close&apos;)} className=&quot;nav hint--bottom&quot;&gt;&lt;a className=&quot;close&quot; onClick={() =&gt; (Display.remove(props.id))}&gt;&lt;Icon name=&quot;close&quot; /&gt;&lt;/a&gt;&lt;/nav&gt;}
    &lt;/header&gt;) : null;

    props = Object.assign({}, props, {className, header, footer, closeButton, plugName: &apos;modal&apos;});
    delete props.title;
    delete props.closeButton;
    delete props.actions;
    delete props.onAction;
    delete props.onSubmit;
    delete props.onCancel;
    delete props.headingClassName;

    return Display.show(props, callback);
};

/**
 * &#x663E;&#x793A;&#x8B66;&#x544A;&#x5BF9;&#x8BDD;&#x6846;
 * @param {String|ReactNode|Function} content &#x5BF9;&#x8BDD;&#x6846;&#x5185;&#x5BB9;
 * @param {?Object} props DisplayLayer &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const showAlert = (content, props, callback) =&gt; {
    return showModal(Object.assign({
        modal: true,
        content,
        actions: &apos;submit&apos;
    }, props), callback);
};

/**
 * &#x663E;&#x793A;&#x786E;&#x8BA4;&#x5BF9;&#x8BDD;&#x6846;
 * @param {String|ReactNode|Function} content &#x5BF9;&#x8BDD;&#x6846;&#x5185;&#x5BB9;
 * @param {?Object} props DisplayLayer &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const showConfirm = (content, props, callback) =&gt; {
    return new Promise(resolve =&gt; {
        let resolved = false;
        showModal(Object.assign({
            closeButton: false,
            modal: true,
            content,
            actions: true,
            onAction: action =&gt; {
                if (!resolved) {
                    resolved = true;
                    resolve(action.type === &apos;submit&apos;);
                }
            },
            onHidden: () =&gt; {
                if (!resolved) {
                    resolve(false);
                }
            }
        }, props), callback);
    });
};

/**
 * &#x663E;&#x793A;&#x8BE2;&#x95EE;&#x7528;&#x6237;&#x8F93;&#x5165;&#x503C;&#x7684;&#x5BF9;&#x8BDD;&#x6846;
 * @param {String|ReactNode|Function} title &#x6807;&#x9898;
 * @param {string} defaultValue &#x9ED8;&#x8BA4;&#x503C;
 * @param {?Object} props DisplayLayer &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const showPrompt = (title, defaultValue, props, callback) =&gt; {
    const inputProps = props &amp;&amp; props.inputProps;
    const onSubmit = props &amp;&amp; props.onSubmit;
    if (inputProps) {
        delete props.inputProps;
    }
    if (onSubmit) {
        delete props.onSubmit;
    }
    return new Promise(resolve =&gt; {
        let resolved = false;
        let value = defaultValue;
        showModal(Object.assign({
            closeButton: false,
            modal: true,
            title,
            content: &lt;InputControl
                autoFocus
                defaultValue={defaultValue}
                onChange={newValue =&gt; {
                    value = newValue;
                }}
                {...inputProps}
            /&gt;,
            actions: true,
            onAction: action =&gt; {
                if (action.type === &apos;submit&apos;) {
                    if (onSubmit &amp;&amp; onSubmit(value) === false) {
                        return false;
                    }
                    resolved = true;
                    resolve(value);
                }
            },
            onHidden: () =&gt; {
                if (!resolved) {
                    resolve(defaultValue);
                }
            }
        }, props), callback);
    });
};

export default {
    show: showModal,
    alert: showAlert,
    confirm: showConfirm,
    prompt: showPrompt,
    hide: Display.hide,
    remove: Display.remove
};
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
